<template>
  <div class="news">
    <template v-for="item in newsList">
      <el-descriptions :title="item.title" :column="1" style="cursor: pointer" class="news_desc" :colon="false"
                       @click="skipNews(item.id)">
        <el-descriptions-item @click="skipNews(item.id)" class="detail" label="发布时间：">{{
            item.date
          }}
        </el-descriptions-item>
        <el-descriptions-item class="detail" label="描述：">
          <div style="margin-top: -14px" v-html="item.page_description"></div>
        </el-descriptions-item>
        <el-descriptions-item>
          <el-button class="btn" type="success" @click="skipNews(item.id)" plain>详情>></el-button>
        </el-descriptions-item>
      </el-descriptions>
      <hr>
    </template>

    <!--  分页  -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="data.page"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="data.size"
      layout="sizes, prev, pager, next, jumper"
      :total="500"
    >
    </el-pagination>
  </div>
</template>

<script>

import {pageList} from "@/api/carbon-manage/news";
import {hideFullScreenLoading, showFullScreenLoading} from "@/utils/loading";

export default {
  name: "News",
  data() {
    return {
      data: {
        page: 1,
        size: 10
      },
      newsList: []
    };
  },
  created() {
    this.loadData();
  },
  methods: {
    loadData() {
      showFullScreenLoading();
      pageList(this.data).then(res => {
        if (res.code === 200) {
          this.newsList = res.data;
        }
        hideFullScreenLoading();
      })
      hideFullScreenLoading();
    },
    skipNews(id) {
      let url = "https://www.carbonstop.net/domedetail" + id;
      window.open(url);
    },
    handleSizeChange(pageSize) {
      this.data.size = pageSize
      this.loadData()
    },
    handleCurrentChange(pageNum) {
      this.data.page = pageNum
      this.loadData()
    },
  }
}
</script>

<style scoped lang="scss">
.news {
  margin: 10px;
}

.news_desc:hover {
  color: green;
}

</style>
